<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>PUPPET</title>
  <!-- Bootstrap -->
  <link type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
  <link rel="stylesheet" type="text/css"
    href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css">
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/aos@next/dist/aos.css">
  <link rel="stylesheet" type="text/css" href="./static/css/common.css">
  <link rel="stylesheet" type="text/css" href="./static/css/home.css">

  <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
  <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
  <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

</head>

<body data-aos-easing="ease" data-aos-duration="400" data-aos-delay="0" class="cbp_menu_push">

  <!-- <div class="container"> -->
  <header>
    <div class="pu_wrapper">
      <nav class="navbar navbar-default" role="navigation">
        <!-- <div class="container-fluid"> -->
        <div class="pu_flex_between">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
              <span class="sr-only">切换导航</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="btn btn-large btn-primary navbar-brand foo_tit" href="#">
              <p>Puppet</p>
              <p>Hilary<span>.</span></p>
            </a>
          </div>
          <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
              <li><a href="#who-we-are">who we are</a></li>
              <li><a href="#services">services</a></li>
              <li><a href="#protfolio">protfolio</a></li>
              <li><a href="#contact">contact</a></li>
              <li><a href="#" class="pu_button">enquiry now</a></li>
              <!-- <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                      portfolio <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                      <li><a href="#">jmeter</a></li>
                      <li><a href="#">EJB</a></li>
                      <li><a href="#">Jasper Report</a></li>
                      <li class="divider"></li>
                      <li><a href="#">分离的链接</a></li>
                      <li class="divider"></li>
                      <li><a href="#">另一个分离的链接</a></li>
                    </ul>
                  </li> -->
            </ul>
          </div>
        </div>
        <!-- </div> -->
      </nav>
    </div>
  </header>

  <!-- <div class="container"> -->
  <div class="pu_home">
    <div class="pu_wrapper">
      <div class="row pu_flex">
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 ho_left">
          <!-- <h1 class="le_h">
            <strong>Hey! You deserve a
              professional and
              amazing website</strong>
            <i class="anim_icon">|</i>
          </h1> -->
          <h1 class="le_h" id="le_h"></h1>
          <p class="muted le_p">Each brand, business, and project is different and unique. An exceptional website
            has a
            personal look and feel, now is your time to be different!</p>
          <a href="/" class="pu_button">discover how</a>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-5 col-lg-6 pu_float aos-init aos-animate"
         data-aos="fade-left">
          <img src="./static/image/note_book.png" alt="Top Scree"/>
        </div>
      </div>
    </div>
    <img class="pu_background" src="./static/image/background-home.png" alt="">
  </div>
  <!-- </div> -->

  <div class="pu_wrapper who-we-are" id="who-we-are">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 aos-init aos-animate" data-aos="flip-left" data-aos-duration="1200">
        <figure>
          <img src="./static/image/work_4.jpg" alt="">
        </figure>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-5 col-lg-5 rt_mag">
        <i class="glyphicon glyphicon-picture aos-init aos-animate" data-aos="zoom-in" data-aos-duration="1200"></i>
        <h2 class="aos-init aos-animate" data-aos="fade-left" data-aos-duration="1200">No more templates and
          old school websites</h2>
        <p class="muted aos-init aos-animate" data-aos="fade-left" data-aos-duration="1200" data-aos-delay="100">We are a couple of website specialists based in Auckland. We build every project from
          scratch and we care about your needs and requirements.</p>
        <p class="muted aos-init aos-animate" data-aos="fade-left" data-aos-duration="1200" data-aos-delay="200">A perfect website is a website that you can love and can help you to reach your business
          goals and converts a prospect into new clients. So let's take a look at our services made them for you!
        </p>
      </div>
    </div>
  </div>

  <div class="services" id="services">
    <div class="pu_wrapper">
      <div class="row">
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
          <i class="glyphicon glyphicon-edit aos-init aos-animate" data-aos="zoom-in" data-aos-duration="1200" data-aos-delay="650"></i>
          <h2 class="aos-init aos-animate" data-aos-anchor-placement="top-bottom" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="400">Graphic Design</h2>
          <p class="muted aos-init aos-animate" data-aos-anchor-placement="top-bottom" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="400">
            Every project is a whole amazing world and we will help you to build and create the perfect experience and
            feeling that your project deserve.
          </p>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
          <i class="glyphicon glyphicon-inbox aos-init aos-animate" data-aos="zoom-in" data-aos-duration="1200" data-aos-delay="850"></i>
          <h2 class="aos-init aos-animate" data-aos-anchor-placement="top-bottom" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="600">Web development</h2>
          <p class="muted aos-init aos-animate" data-aos-anchor-placement="top-bottom" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="600">
            Easy to manage and update, no previous knowledge needed! No worries our websites have special attention on
            SEO and they are mobile friendly.
          </p>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
          <i class="glyphicon glyphicon-search aos-init aos-animate" data-aos="zoom-in" data-aos-duration="1200" data-aos-delay="1050"></i>
          <h2 class="aos-init aos-animate" data-aos-anchor-placement="top-bottom" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="800">Social Media</h2>
          <p class="muted aos-init aos-animate" data-aos-anchor-placement="top-bottom" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="800">
            Get graphics designs to use on your social media designs. Let your timeline be an extension of your brand
            easily.
          </p>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
          <i class="glyphicon glyphicon-signal aos-init aos-animate" data-aos="zoom-in" data-aos-duration="1200" data-aos-delay="1450"></i>
          <h2 class="aos-init aos-animate" data-aos-anchor-placement="top-bottom" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="1200">Google Analytics</h2>
          <p class="muted aos-init aos-animate" data-aos-anchor-placement="top-bottom" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="1200">
            Get monthly or weekly reports in your email about your potential clients and your website performance.
            Everything that you want to know.
          </p>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
          <i class="glyphicon glyphicon-bullhorn aos-init aos-animate" data-aos="zoom-in" data-aos-duration="1200" data-aos-delay="1650"></i>
          <h2 class="aos-init aos-animate" data-aos-anchor-placement="top-bottom" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="1400">Domain registration</h2>
          <p class="muted aos-init aos-animate" data-aos-anchor-placement="top-bottom" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="1400">
            If you don't have a domain, no worries at all! You can get one with us, you can choose between .co.nz .com
            .nz .kiwi and more!
          </p>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
          <i class="glyphicon glyphicon-folder-close aos-init aos-animate" data-aos="zoom-in" data-aos-duration="1200" data-aos-delay="1850"></i>
          <h2 class="aos-init aos-animate" data-aos-anchor-placement="top-bottom" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="1600">Hosting</h2>
          <p class="muted aos-init aos-animate" data-aos-anchor-placement="top-bottom" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="1600">
            We will help you to choose the perfect hosting for you. We know that your requirements will be different
            depending on your business.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="protfolio" id="protfolio">
    <div class="pu_wrapper">
      <h2 class="aos-init aos-animate" data-aos-anchor-placement="top-bottom" data-aos="fade-up" data-aos-delay="1800">We are starting in New Zealand. </h2>
      <p class="muted">There are some of our designs.</p>
    </div>
    <div class="prot_gallery">
      <!-- <ul>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
      </ul> -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><a href="./static/image/cont_1.png" data-fancybox="gallery"
              data-caption="Caption #1"><img src="./static/image/cont_1.png" alt=""></a></div>
          <div class="swiper-slide"><a href="./static/image/cont_2.png" data-fancybox="gallery"
              data-caption="Caption #2"><img src="./static/image/cont_2.png" alt=""></a></div>
          <div class="swiper-slide"><a href="./static/image/cont_3.png" data-fancybox="gallery"
              data-caption="Caption #3"><img src="./static/image/cont_3.png" alt=""></a></div>
          <div class="swiper-slide"><a href="./static/image/cont_4.png" data-fancybox="gallery"
              data-caption="Caption #4"><img src="./static/image/cont_4.png" alt=""></a></div>
          <div class="swiper-slide"><a href="./static/image/cont_5.png" data-fancybox="gallery"
              data-caption="Caption #5"><img src="./static/image/cont_5.png" alt=""></a></div>
          <div class="swiper-slide"><a href="./static/image/cont_6.png" data-fancybox="gallery"
              data-caption="Caption #6"><img src="./static/image/cont_6.png" alt=""></a></div>
          <div class="swiper-slide"><a href="./static/image/cont_7.png" data-fancybox="gallery"
              data-caption="Caption #7"><img src="./static/image/cont_7.png" alt=""></a></div>
          <div class="swiper-slide"><a href="./static/image/cont_8.png" data-fancybox="gallery"
              data-caption="Caption #8"><img src="./static/image/cont_8.png" alt=""></a></div>
          <div class="swiper-slide"><a href="./static/image/cont_9.png" data-fancybox="gallery"
              data-caption="Caption #9"><img src="./static/image/cont_9.png" alt=""></a></div>          
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
    </div>

    <!-- <select name="" id="test" onchange="changeSelect()">
      <option value="测试一">测试一</option>
      <option value="测试二">测试二</option>
      <option value="测试三">测试三</option>
    </select> -->

  </div>

  <div class="contact" id="contact">
    <div class="pu_wrapper">
      <div class="row pu_flex_between">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
          <figure>
            <div class="form aos-init aos-animate" data-aos-duration="1200" data-aos="flip-left" data-aos-delay="600">
              <form action="">
                <div class="form-group form_input">
                  <label for="con_name">Name</label>
                  <input type="text" class="input" id="con_name" name="name">
                </div>
                <div class="form-group form_input">
                  <label for="con_email">Email</label>
                  <input type="email" class="input" id="con_email" name="email">
                </div>
                <div class="form-group form_input">
                    <label for="con_message">Message</label>
                    <textarea id="con_message" name="message" rows="10" cols="30"></textarea>
                  </div>
                <button type="submit" class="btn pu_button">Send inquiry</button>
              </form>
            </div>
          </figure>
        </div>
        <div class="col-xs-12 col-sm-5 col-md-5 col-lg-5">
          <i class="glyphicon glyphicon-picture aos-init aos-animate" data-aos="zoom-in" data-aos-duration="1200" data-aos-delay="400"></i>
          <h2 class="aos-init aos-animate" data-aos="fade-left" data-aos-duration="1200">
            Make an inquiry and
            get a FREE quote today</h2>
          <p class="muted aos-init aos-animate" data-aos="fade-left" data-aos-duration="1200" data-aos-delay="100">You have a project in mind and we are eager to start working on it!</p>
          <p class="muted aos-init aos-animate" data-aos="fade-left" data-aos-duration="1200" data-aos-delay="200">Send us an inquiry explaining shortly what are you looking for and we come back to yo with
            some ideas and prices.
          </p>
          <p class="muted p_col aos-init aos-animate" data-aos="fade-left" data-aos-duration="1200" data-aos-delay="200"><i class="glyphicon glyphicon-envelope"></i> hi@digital-earthquake.co.nz</p>
          <p class="muted p_col aos-init aos-animate" data-aos="fade-left" data-aos-duration="1200" data-aos-delay="300"><i class="glyphicon  glyphicon-fire"></i> digital.earthquake.agency</p>
        </div>
      </div>
    </div>
  </div>

  <div class="pu_wrapper">
    <div class="row pu_coupon pu_flex">
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <h3>Save up to<span>45% off</span></h3>
        <h3>on your website today!</h3>
        <a href="" class="pu_button">claim your discount</a>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <img src="./static/image/coupon.png" class="pu_float" />
      </div>
    </div>
  </div>

  <footer>
    <div class="pu_wrapper">
      <a href="/" class="foo_tit">
        <p>Puppet</p>
        <p>Hilary<span>.</span></p>
      </a>
      <div class="row pu_flex_between">
        <div class="span4">
          <p>All rigth reserved 2019.</p>
        </div>
        <div class="span4">
          <p><a href="/">hi@digital-earthquake.co.nz</a></p>
        </div>
        <div class="span4">
          <p>follow us on <a>facebook</a></p>
        </div>
      </div>
    </div>
    <img src="./static/image/footer.png" alt="" class="pu_background">
  </footer>

  <!-- <div class="row">
      <div class="col-xs-12 col-sm-9 col-md-6 col-lg-4">
        <p>test</p>
      </div>
      <div class="col-xs-12 col-sm-3 col-md-6 col-lg-8">
        <p>home</p>
      </div>
    </div> -->

  <!-- </div> -->


  <!-- <script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> -->
  
  

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <!-- 加载 轮播图工具 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
    <!-- 加载 查看图片工具 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.js"></script>
    <!-- banner字体输入效果 -->
    <script src="https://cdn.bootcss.com/typeit/6.0.3/typeit.min.js"></script>
    <!-- 元素动画效果 如top的电脑图 -->
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>

  <script>
    // top文字动画
    new TypeIt('#le_h', {
      strings: `Hey! You deserve a professional and amazing website`,
      speed: 100,
      waitUntilVisible: true
    }).go();

    // 顶部图片页面动画效果
    // AOS.init();
    
		AOS.init({
			easing: 'ease-out-back',
			duration: 3000
		});
	

    // 滚动图片效果
    var swiper = new Swiper('.swiper-container', {
      autoplay: true, // 自动播放
      // autoplay: {
      //   reverseDirection: true,//开启反向自动轮播
      // },
      slidesPerView: 3,
      spaceBetween: 30,
      freeMode: true,
      // pagination: {  // 分页效果
      //   el: '.swiper-pagination',
      //   clickable: true,
      // },
    });



      // function changeSelect () {
      //   var te = document.getElementById('test');
      //   var ind = te.selectedIndex;

      //   console.log(te);
      //   console.log(ind);
      //   console.log(te.options[ind].value);
      //   console.log(te.options[ind].text);
      // } 

  </script>
</body>

</html>